<DOCTYPE html>
    <html>
    <head>
        <title>三级下拉菜单</title>
        <meta charset="utf-8">
        <style type="text/css">
            body,*{
                margin: 0px;
                padding: 0px;
                font-size: 0px;
                color: #555;
                box-sizing:border-box;
            }
            ul{
                list-style: none;
            }
            .banner{
                width: 100%;
                height: 100px;
            }
            .nav{
                width: 100%;
                height: 60px;
                border: 0px;
                border-top: 1px solid #eee;
                border-bottom: 1px solid #eee;
                background-color: #fff;
            }
            .nav>ul{
                width: 80%;
                margin:0 auto;
            }
            .nav>ul:after{
                display: block;
                content: '';
                clear: both;
            }
            .nav>ul>li{
                display: block;
                width: 180px;
                height: 100%;
                padding-left: 20px;
                float: left;
                text-align: center;
                margin-right: 5px;
                border: 1px solid black;
                margin-bottom: 3px;

            }
            .nav>ul>li:hover{
                background-color: #fff5f5;
            }
            .nav>ul>li a{
                display: inline-block;
                width: 100%;
                height: 100%;
                padding: 10px 20px;
                font-size: 18px;
                line-height: 40px;
                text-decoration:none;
            }
            .nav>ul>li ul{
                display: none;
            }
            .nav>ul>li:hover>a+ul{
                display: block;
            }
            .nav>ul>li>ul{
                width: 180px;
                height: auto;
                border: 1px solid black;
                border-radius:3px;
                position: relative;
                top: 0px;
                left: 20px;

            }
            .nav>ul>li>ul>li,.nav>ul>li>ul>li>ul>li{
                display: block;
                width: 100%;
                height: 60px;
                text-align: center;
                border-bottom: 1px solid #eee;
            }
            .nav>ul>li>ul>li:last-child,.nav>ul>li>ul>li>ul>li:last-child{
                border: 0px;
            }
            .nav>ul>li>ul>li:hover,.nav>ul>li>ul>li>ul>li:hover{
                background: #fff9f9;
            }
            .nav>ul>li>ul>li:hover ul{
                display: block;
            }
            .nav>ul>li>ul>li>ul{
                width: 160px;
                height: auto;
                border: 1px solid #eee;
                border-radius:3px;
                position: relative;
                top: -60px;
                left: 100%;
            }
        </style>
    </head>
    <body>
    <div class="banner"></div>
    <div class="nav">
        <ul>
            <li>
                <a href="#">一级菜单1</a>
                <ul>
                    <li>
                        <a href="#">二级菜单1</a>
                        <ul>
                            <li><a href="#a" target="_self">三级菜单1</a></li>
                            <li><a href="#a" target="_self">三级菜单2</a></li>
                            <li><a href="#a" target="_self">三级菜单3</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">二级菜单2</a>
                        <ul>
                            <li><a href="#a" target="_self">三级菜单1</a></li>
                            <li><a href="#a" target="_self">三级菜单2</a></li>
                            <li><a href="#a" target="_self">三级菜单3</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">二级菜单3</a>
                        <ul>
                             <li><a href="#a" target="_self">三级菜单1</a></li>
                            <li><a href="#a" target="_self">三级菜单2</a></li>
                            <li><a href="#a" target="_self">三级菜单3</a></li>
                        </ul>

                    </li>
                </ul>
            </li>
            <li>
                <a href="#">一级菜单2</a>
                <ul>
                    <li>
                        <a href="#">二级菜单1</a>
                        <ul>
                            <li><a href="#a" target="_self">三级菜单1</a></li>
                            <li><a href="#a" target="_self">三级菜单2</a></li>
                            <li><a href="#a" target="_self">三级菜单3</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">二级菜单2</a>
                        <ul>
                            <li><a href="#a" target="_self">三级菜单1</a></li>
                            <li><a href="#a" target="_self">三级菜单2</a></li>
                            <li><a href="#a" target="_self">三级菜单3</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">二级菜单3</a>
                        <ul>
                            <li><a href="#a" target="_self">三级菜单1</a></li>
                            <li><a href="#a" target="_self">三级菜单2</a></li>
                            <li><a href="#a" target="_self">三级菜单3</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li>
                <a href="#">一级菜单3</a>
                <ul>
                    <li>
                        <a href="#">二级菜单1</a>
                        <ul>
                          <li><a href="#a" target="_self">三级菜单1</a></li>
                            <li><a href="#a" target="_self">三级菜单2</a></li>
                            <li><a href="#a" target="_self">三级菜单3</a></li>
                        </ul>
                    </li>
                     <li>
                        <a href="#">二级菜单2</a>
                        <ul>
                          <li><a href="#a" target="_self">三级菜单1</a></li>
                            <li><a href="#a" target="_self">三级菜单2</a></li>
                            <li><a href="#a" target="_self">三级菜单3</a></li>
                        </ul>
                    </li>
                     <li>
                        <a href="#">二级菜单3</a>
                        <ul>
                          <li><a href="#a" target="_self">三级菜单1</a></li>
                            <li><a href="#a" target="_self">三级菜单2</a></li>
                            <li><a href="#a" target="_self">三级菜单3</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
    </body>
    </html>